Using Actions Charts for Reactive Web Application Modeling

Building a rich internet application (RIA) requires the programming of various callbacks and listeners. AJAX like server requests require callback handler objects that react to the asynchronous server response. Active GUI elements like buttons or menu entries require action handlers. Using a timer queue requires appropriate event handlers, too. Programming all these handlers is tedious and error prone. Subsequent steps of e.g. initialization or of a protocol of server requests are scattered over multiple separated blocks of code. The control flow between these blocks is hard to retrieve. Some common variables have to be introduced in order to pass the application state between the different handler blocks. To overcome these problems, we propose to use an extension of UML statecharts, called action charts, dedicated to the modeling of callbacks and listeners. All kinds of handlers are modeled in a common uniform statechart notation. States become actions or handlers. Transitions represent the flow of execution. Variables are shared between actions providing a simple mechanism for passing the application state from one handler to the next. From such action charts we generate sourcecode that is compliant with the Google Web Toolkit (GWT). The generated code is pure Java code that facilitates validation and debugging of the modeled behavior. It can be translated to JavaScript and run inside the web browser using the GWT crosscomplier. The action charts and code generation are implemented as part of the open source CASE tool Fujaba.